import { createRouter, createWebHistory } from 'vue-router'

const routerPage = [
  {
    path: '/',
    name: '基础示例',
    meta: {
      title: '基础示例'
    },
    component: () => import('@/views/day1/index.vue')
  },
  {
    path: '/random',
    redirect: '/random/1',
    name: '图布局',
    meta: {
      title: '图布局 🔽',
      hasHide: false
    },
    children: [
      {
        path: '1',
        name: '随机布局',
        meta: {
          title: '随机布局 random'
        },
        component: () => import('@/views/day2/random.vue')
      },
      {
        path: 'directed',
        name: '经典力导向布局',
        meta: {
          title: '经典力导向布局 directed'
        },
        component: () => import('@/views/day2/force-directed.vue')
      },
      {
        path: 'circular',
        name: '环形布局',
        meta: {
          title: '环形 circular'
        },
        component: () => import('@/views/day2/circular.vue')
      },
      {
        path: 'radial',
        name: '辐射形布局',
        meta: {
          title: '辐射形 radial'
        },
        component: () => import('@/views/day2/radial.vue')
      },
      {
        path: 'mds',
        name: '高维数据降维布局',
        meta: {
          title: '高维数据降维 MDS'
        },
        component: () => import('@/views/day2/mds.vue')
      },
      {
        path: 'fruchterman',
        name: 'fruchterman 力导布局',
        meta: {
          title: '力导布局'
        },
        component: () => import('@/views/day2/fruchterman.vue')
      },
      {
        path: 'dagre',
        name: '层级布局',
        meta: {
          title: '层次布局 Dagre'
        },
        component: () => import('@/views/day2/dagre.vue')
      },
      {
        path: 'concentric',
        name: '同心圆布局',
        meta: {
          title: '同心圆布局 Concentric'
        },
        component: () => import('@/views/day2/concentric.vue')
      },
      {
        path: 'grid',
        name: '网格布局',
        meta: {
          title: '网格布局 grid'
        },
        component: () => import('@/views/day2/grid.vue')
      },
      {
        path: 'compactBox',
        name: '树图布局 → 紧凑树',
        meta: {
          title: '紧凑树  compactBox ',
          detail: '树图的默认布局，其特点是布局时统合考虑每个树节点的包围盒。适合于脑图等应用场景'
        },
        component: () => import('@/views/day2/TreeGraph/compactBox.vue')
      },
      {
        path: 'dendrogram',
        name: '树图布局 → 生态树布局',
        meta: {
          title: '生态树布局  dendrogram',
          detail:
            '生态树布局的特点是所有子节点布局在同一层级，不考虑节点大小，每个节点被当成 1px 处理。适用于表示层次聚类'
        },
        component: () => import('@/views/day2/TreeGraph/dendrogram.vue')
      },
      {
        path: 'indented',
        name: '树图布局 → 缩进树布局',
        meta: {
          title: '缩进树布局  indented',
          detail:
            '树节点的层级通过水平方向的缩进量来表示。每个元素会占一行/一列。常用场景是文件目录结构'
        },
        component: () => import('@/views/day2/TreeGraph/indented.vue')
      },
      {
        path: 'mindmap',
        name: '树图布局 → 脑图树',
        meta: {
          title: '脑图树  mindmap',
          detail:
            '深度相同的节点将会被放置在同一层，与 compactBox 不同的是，布局不会考虑节点的大小。'
        },
        component: () => import('@/views/day2/TreeGraph/mindmap.vue')
      }
    ]
  },
  {
    path: '/Behavior',
    name: '自定义交互 Behavior',
    meta: {
      title: '自定义交互 registerBehavior',
      detail: '深度相同的节点将会被放置在同一层，与 compactBox 不同的是，布局不会考虑节点的大小。'
    },
    component: () => import('@/views/day3/index.vue')
  },
  {
    path: '/DagreFamilyTies',
    name: 'Dagre 层次布局 家人关系拓扑图',
    meta: {
      title: '层次布局 家人关系拓扑图'
    },
    component: () => import('@/views/day4/index.vue')
  },
  {
    path: '/customMode',
    name: '交互模式 Mode',
    meta: {
      title: '交互模式 Mode'
    },
    component: () => import('@/views/day5/index.vue')
  },
  {
    path: '/animate',
    name: '基础动画',
    meta: {
      title: '基础动画'
    },
    component: () => import('@/views/day6/index.vue')
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: routerPage
})

router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title as string
  }
  next()
})

export { routerPage }
export default router
